import { onMounted } from 'vue';
import { addListener } from 'resize-detector';
import debounce from 'lodash/debounce';

/**
 * @desc 大屏中常见的按比例缩放屏幕
 */
const useScale = () => {
  const calcScale = () => {
    const WIDTH = 1920;
    // @ts-ignore
    document.body.style = `width: 1920px;height: 1080px;transform: scale(${document
      .documentElement.clientWidth / WIDTH});transform-origin: left top`;
  };
  const _debounce = debounce(() => {
    calcScale();
  }, 500);

  onMounted(async () => {
    calcScale();
    addListener(document.getElementsByTagName('html')[0], _debounce);
  });
};

export default useScale;
